昨天提到的 describe 與 test 搭配一起的群組寫法。
今天補充一些其他寫法：

(一) describe 搭配 it

原本的寫法：

// Button
describe("Button", () => {
    test("Render a Log In Button", () => {
        render(<LogInButton />);

        const textEl = screen.getByText("Log In");
        expect(textEl).toBeInTheDocument();
    });

    test("Render a Log Out Button", () => {
        render(<LogInButton />);

        const textEl = screen.getByText("Log Out");
        expect(textEl).toBeInTheDocument();
    });
});

test 可以換成 it 執行結果一樣。

// Button
describe("Button", () => {
    it("Render a Log In Button", () => {
        render(<LogInButton />);

        const textEl = screen.getByText("Log In");
        expect(textEl).toBeInTheDocument();
    });

    it("Render a Log Out Button", () => {
        render(<LogInButton />);

        const textEl = screen.getByText("Log Out");
        expect(textEl).toBeInTheDocument();
    });
});

(二) describe 搭配 fit

原本的寫法：

// Button
describe("Button", () => {
    test.only("Render a Log In Button", () => { // 只執行這行測試
        render(<LogInButton />);

        const textEl = screen.getByText("Log In");
        expect(textEl).toBeInTheDocument();
    });

    test("Render a Log Out Button", () => {
        render(<LogInButton />);

        const textEl = screen.getByText("Log Out");
        expect(textEl).toBeInTheDocument();
    });
});

test.only 可以換成 fit 執行結果一樣。

// Button
describe("Button", () => {
    fit("Render a Log In Button", () => { // 只執行這行測試
        render(<LogInButton />);

        const textEl = screen.getByText("Log In");
        expect(textEl).toBeInTheDocument();
    });

    it("Render a Log Out Button", () => {
        render(<LogInButton />);

        const textEl = screen.getByText("Log Out");
        expect(textEl).toBeInTheDocument();
    });
});

(三) describe 搭配 xit

原本的寫法：

// Button
describe("Button", () => {
    test.skip("Render a Log In Button", () => { // 不執行這行測試
        render(<LogInButton />);

        const textEl = screen.getByText("Log In");
        expect(textEl).toBeInTheDocument();
    });

    test("Render a Log Out Button", () => {
        render(<LogInButton />);

        const textEl = screen.getByText("Log Out");
        expect(textEl).toBeInTheDocument();
    });
});

test.skip 可以換成 xit 執行結果一樣。

// Button
describe("Button", () => {
    xit("Render a Log In Button", () => { // 不執行這行測試
        render(<LogInButton />);

        const textEl = screen.getByText("Log In");
        expect(textEl).toBeInTheDocument();
    });

    it("Render a Log Out Button", () => {
        render(<LogInButton />);

        const textEl = screen.getByText("Log Out");
        expect(textEl).toBeInTheDocument();
    });
});

參考資源

• React Testing Tutorial - 13 - Filename Conventions